<template>
  <view>
    <MusicHead title="搜索" :isShow="true" :iconBlack='true'></MusicHead>
    <view class="content">
      
      <scroll-view scroll-y="true">
          <!-- 搜索区域 -->
          <view class="search">
            <text class="iconfont icon-Magnifier"></text>
            <input type="text" placeholder="搜索歌曲" v-model="searchWord" @confirm="handleToSearch" @input="handleToIpt"/>
            <text class="iconfont icon-guanbi" v-show="searchWord ? true : false" @tap="clearSearchContent"></text>
          </view>
          
          <!-- --------------------------搜索界面---------------------------- -->
          <block v-if="searchType == 1">
          <!-- 搜索历史 -->
          <view class="search-history" v-if="searchHistory.length > 0">
            <view>
              <text>历史记录</text>
              <text class="iconfont icon-lajitong" @tap="clearSearchHistory"></text>
            </view>
            <view>
              <text v-for="(item,index) in searchHistory" :key="index" @tap="handleToWord(item)">{{item}}</text>
            </view>
          </view>
          <!-- 热搜榜 -->
          <view class="search-hot">
            <view class="search-hot-title">
              <text>热搜榜</text>
            </view>
            <view class="search-hot-list">
              <view class="search-hot-list-item" v-for="(item,index) in searchHotList" :key='index'
                @tap="handleToWord(item.searchWord)">
                <view class="item-index" :class="{'before': index <= 2}">{{index+1}}</view>
                <view class="item-name">
                  <view>
                    <text>{{item.searchWord}}</text>
                    <view>
                      <image :src="item.iconUrl ? item.iconUrl : ''" mode=""></image>
                    </view>
                  </view>
                  <view class="item-name-desc">{{item.content ? item.content : ''}}</view>
                </view>
                <view class="item-count">
                  <text>{{item.score}}</text>
                </view>
              </view>
            </view>
            <view>

            </view>
          </view>
        </block>
        
        <!-- 输入框输入搜索内容 -->
        <block v-else-if="searchType == 2">
          <view class="search-suggest">
            <!-- 搜索内容 -->
            <view class="search-content">搜索 “ {{searchWord}} ”</view>
            <!-- 搜索建议列表 -->
            <view class="search-suggest-item" v-for="(item,index) in searchSuggest" :key="index" @tap="handleToSearchResult">
              <text class="iconfont icon-Magnifier"></text>
              <text>{{item.keyword}}</text>
            </view>
          </view>
        </block>
        
        <!-- 搜索结果 -->
        <block v-else-if="searchType == 3">
          <view class="search-result">
            <view class="search-result-item" v-for="(item,index) in searchResult" :key="index" @tap="handleToDetail(item.id)">
              <!-- 左侧 -->
              <view class="search-msg">
                <view class="songName">{{item.name}}</view>
                <view class="songAr"><text v-for="(itemAr,i) in item.artists" :key="i">{{itemAr.name}}{{i==item.artists.length-1?"":'/'}}</text>{{' - ' + item.album.name}}</view>
              </view>
              <!-- 右侧 -->
              <text class="iconfont icon-bofang1"></text>
            </view>
          </view>
        </block>
      </scroll-view>

    </view>
  </view>
</template>

<script>
  import "@/common/iconfont.css"
  import {
    searchHotDetailList,
    searchSuggest,
    searchWord
  } from "@/api/getSearchHotDetailList.js"
  export default {
    data() {
      return {
        // 热搜榜列表
        searchHotList: [],
        // 搜索的关键字
        searchWord: '',
        // 搜索历史记录列表
        searchHistory: [],
        // 控制 显示搜索界面还是搜索建议页面还是结果页，默认在搜索界面
        searchType:1,
        // 搜索建议列表
        searchSuggest:[],
        searchResult:[]
      }
    },
    methods: {
      // 点击 热搜列表 或 搜索记录 直接将内容填进搜索框，并调用 handleToSearch 函数
      handleToWord(searchWord) {
        this.searchWord = searchWord
        this.handleToSearch(this.searchWord)
      },
      // 监听输入框的 input 事件
      handleToIpt(e){
        console.log()
        if(!e.detail.value){
          this.searchType = 1
          return
        }
        this.searchType = 2
        this.handleToSearchSuggest(e.detail.value)
      },
      // 清除 搜索内容
      clearSearchContent(){
        this.searchWord = ''
        this.searchType = 1
      },
      handleToSearchResult(){
        this.handleToSearch()
      },
      // 点击回车----确定搜索
      handleToSearch() {
        searchWord(this.searchWord).then(res=>{
          if(res.code !== 200) return
          this.searchResult = res.result.songs
          console.log(res)
        })
        this.searchType = 3
        
        /*  搜索历史  */
        // 点击回车后将搜索结果追加到数组中
        if(!this.searchWord.trim()) return
        this.searchHistory.unshift(this.searchWord)
        this.searchHistory = [...new Set(this.searchHistory)]
        if (this.searchHistory.length > 10) {
          this.searchHistory.length = 10
        }
        // 将数组保存到本地存储中
        uni.setStorageSync('searchHistory', JSON.stringify(this.searchHistory))
        // console.log(JSON.parse(uni.getStorageSync('searchHistory')))
        // this.searchWord = ''
        // console.log(this.searchWord)
      },
      // 清除搜索历史
      clearSearchHistory() {
        console.log(111)
        uni.removeStorageSync('searchHistory')
        this.searchHistory = []
      },
      // 搜索建议
      async handleToSearchSuggest(word){
        const res = await searchSuggest(word)
        if(res.code !== 200) return
        // console.log(res)
        this.searchSuggest = res.result.allMatch
        // console.log(this.searchSuggest)
      },
      // 点击歌曲跳转至歌曲详情页
      handleToDetail(songId){
        uni.navigateTo({
          url:'/pages/musicdetail/musicdetail?id='+songId
        })
      }
    },
    // watch:{
    //   searchWord(newVal){
    //     if(newVal){
    //       // 显示搜索建议列表
    //       this.searchType = 2
    //       this.handleToSearchSuggest(newVal)
    //     }else{
    //       this.searchType = 1
    //     }
    //   }
    // },
    onLoad() {
      // 将本地存储的搜索历史记录取出来，保存到 searchHistory 数组中
      if (uni.getStorageSync('searchHistory')) {
        this.searchHistory = JSON.parse(uni.getStorageSync('searchHistory'))
      }
      // 获取数据
      searchHotDetailList().then((res) => {
        if (res.code !== 200) return
        this.searchHotList = res.data
        // console.log(res)
      })
    }
  }
</script>

<style>
  .content {
    box-sizing: border-box;
    padding: 0 32rpx;
  }

  .search {
    display: flex;
    align-items: center;
    width: 100%;
    height: 70rpx;
    background-color: #f7f7f7;
    border-radius: 70rpx;
    margin: 52rpx 0 24rpx;
  }

  .search text {
    margin: 0 26rpx 0 28rpx;
    color: #b5b5b5;
  }

  .search input {
    flex: 1;
    color: #666;
    font-size: 28rpx;
  }

  /* 搜索历史 */
  .search-history>view:nth-of-type(1) {
    display: flex;
    justify-content: space-between;
    color: #0b0b0b;
    font-size: 28rpx;
    padding-top: 24rpx;
  }

  .search-history>view:nth-of-type(2) {
    display: flex;
    flex-wrap: wrap;
    padding: 36rpx 0 0;
    margin-bottom: 54rpx;
  }

  .search-history>view:nth-of-type(2) text {
    padding: 0 20rpx;
    line-height: 62rpx;
    text-align: center;
    border-radius: 32rpx;
    background-color: #f8f8f8;
    font-size: 24rpx;
    color: #0B0B0B;
    margin-right: 20rpx;
    margin-bottom: 20rpx;
  }

  /* 热搜榜列表 */
  .search-hot-title {
    /* margin-bottom: 32rpx; */
  }

  .search-hot .search-hot-list-item {
    display: flex;
    justify-content: space-between;
    line-height: 90rpx;
  }

  .search-hot-list-item .item-index {
    padding: 0 8rpx;
    width: 32rpx;
    margin-right: 26rpx;
    color: #858585;
  }

  .search-hot-list-item .item-name {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    padding-right: 44rpx;
  }

  .search-hot-list-item .item-name>view:nth-of-type(1) {
    display: flex;
    line-height: 42rpx;
  }

  .search-hot-list-item .item-name text {
    font-size: 30rpx;
    color: #232122;
    margin-right: 16rpx;
  }

  /* .search-hot-list-item .item-name>view:nth-of-type(1) view{
    padding: 0 10rpx;
    min-width: 28rpx;
    height: 28rpx;
    
  } */
  .search-hot-list-item .item-name image {
    width: 34rpx;
    height: 28rpx;
  }

  .search-hot-list-item .item-name .item-name-desc {
    font-size: 22rpx;
    color: #878787;
    line-height: 36rpx;
    /*1. 超出的部分隐藏 */
    overflow: hidden;
    /*2. 文字用省略号替代超出的部分 */
    text-overflow: ellipsis;
    /* 3. 弹性伸缩盒子模型显示 */
    display: -webkit-box;
    /* 4. 限制在一个块元素显示的文本的行数 */
    -webkit-line-clamp: 1;
    /* 5. 设置或检索伸缩盒对象的子元素的排列方式 */
    -webkit-box-orient: vertical;
  }

  .search-hot-list-item .item-count {
    font-size: 20rpx;
    color: #d6d6d6;
  }

  .before {
    color: #f52225 !important;
  }
  
  
  /* 搜索建议 */
  .search-suggest{
    border-top: 1px solid #e3e3e3;
    padding: 38rpx 26rpx 0;
  }
  .search-content{
    font-size: 28rpx;
    color: #4a71aa;
    margin-bottom: 36rpx;
  }
  .search-suggest-item{
    display: flex;
    line-height: 100rpx;
  }
  .search-suggest-item>text:nth-of-type(1){
    font-size: 32rpx;
    color: #c0bec1;
    vertical-align: middle;
    margin-right: 22rpx;
  }
  .search-suggest-item>text:nth-of-type(2){
    font-size: 28rpx;
    color: #6b6c6b;
    /*1. 超出的部分隐藏 */
    overflow: hidden;
    /*2. 文字用省略号替代超出的部分 */
    text-overflow: ellipsis;
    /* 3. 弹性伸缩盒子模型显示 */
    display: -webkit-box;
    /* 4. 限制在一个块元素显示的文本的行数 */
    -webkit-line-clamp: 1;
    /* 5. 设置或检索伸缩盒对象的子元素的排列方式 */
    -webkit-box-orient: vertical;
  }
  
  /* 搜索结果 */
  .search-result{
    border-top: 4rpx solid #e3e3e3;
  }
  .search-result-item{
    display: flex;
    justify-content: space-between;
    margin-top: 40rpx;
    border-bottom: 1px solid #e3e3e3 ;
    padding-bottom: 20rpx;
  }
  .search-result-item .search-msg{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-right: 78rpx;
  }
  .search-msg .songName{
    font-size: 26rpx;
    color: #1a1a1a;
    
  }
  .search-msg .songAr{
    font-size: 22rpx;
    color: #afafb1;
    /*1. 超出的部分隐藏 */
    overflow: hidden;
    /*2. 文字用省略号替代超出的部分 */
    text-overflow: ellipsis;
    /* 3. 弹性伸缩盒子模型显示 */
    display: -webkit-box;
    /* 4. 限制在一个块元素显示的文本的行数 */
    -webkit-line-clamp: 1;
    /* 5. 设置或检索伸缩盒对象的子元素的排列方式 */
    -webkit-box-orient: vertical;
  }
  .search-result-item>text{
    display: flex;
    align-items: center;
    font-size: 50rpx;
    color: #c1c1c1;
  }
</style>
